<template>
  <div>
    <el-upload
      :action="url"
      :accept="'image/*'"
      :headers="headers"
      :before-upload="beforeUpload"
      :on-success="onUploadSuccess"
      :on-error="onUploadError"
      :show-file-list="false"
    >
      <slot>
        <el-button size="small" type="primary">点击上传</el-button>
      </slot>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      url: process.env.VUE_APP_BASE_API + '/fileStorage/upload', // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  methods: {
    beforeUpload(file) {
      // 上传前的逻辑
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        this.$modal.msgError('只能上传图片文件！')
        return
      }
      this.$modal.loading('正在上传图片，请稍候...')
      return isImage
    },
    onUploadSuccess(response, file, fileList) {
      this.$modal.closeLoading()
      // 上传成功的回调函数
      if (response.success) {
        this.$modal.msgSuccess('上传成功')
        this.$emit('uploadSuccess', response.urlPath)
      } else {
        this.$modal.msgError(response.msg)
      }
    },
    onUploadError(err, file, fileList) {
      // 上传失败的回调函数
      this.$modal.msgError('上传失败，请重试')
      this.$modal.closeLoading()
    }
    // 自动打开文件选择器
    // openFileSelectionDialog() {
    //   // 打开文件选择框的逻辑，与之前的代码一样
    //   const fileInput = document.createElement('input');
    //   fileInput.type = 'file';
    //   fileInput.addEventListener('change', (event) => {
    //     // 处理文件选择的逻辑，与之前的代码一样
    //     const selectedFiles = event.target.files;
    //     // 处理选中的文件，比如上传到服务器等操作
    //     // ...
    //   });
    //   fileInput.click();
    // },
  }
}
</script>
